<template>
  <div style="text-align: center;background-color: #2657c0;height: 730px;">

    <el-row>
      <el-col :span="8"></el-col>
      <el-col :span="8">
        <!-- <div class="login">
          <p class="login_title">
            <span :class="isActiveIndex === 0 ? 'isActiveTitle' : ''" 
              @click="accountLogin">账号登录</span>--><!-- 利用三元运算符判定点击了哪个登录,从而绑定样式 -->
        <!-- <span :class="isActiveIndex === 1 ? 'isActiveTitle' : ''" @click="smsLogin">短信登录</span>
          </p> -->

        <!-- <el-form :model="ruleForm" :rules="rules" style="text-align: center;" ref="form" label-width="100px"
            class="demo-ruleForm"> -->
        <!-- 手机号 -->
        <!-- <el-form-item label="手机号" prop="phone">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item> -->

        <!-- 密码 -->
        <!-- <el-form-item label="密码" prop="password">
              <el-input type="password" v-model="ruleForm.password"></el-input>
            </el-form-item> -->

        <!-- <p class="login_agree"><el-checkbox>我已阅读并同意<a>《用户服务协议》</a>、<a>《隐私权政策》</a></el-checkbox></p>
            <p style="text-align:right;margin-top:10px"><a>忘记密码？</a></p>
            <p style="text-align:center;margin-top:40px">第三方登录或<a>立即注册</a></p> -->

        <!-- 提交按钮 -->
        <!-- <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
            </el-form-item>
          </el-form> 
        </div>-->

        <div style="min-height:300px;padding: 100px 0 0 500px;">
          <div class="login_box">
            <p class="login_title">
              <span :class="isActiveIndex === 0 ? 'isActiveTitle' : ''"
                @click="accountLogin">账号登录</span><!-- 利用三元运算符判定点击了哪个登录,从而绑定样式 -->
              <span :class="isActiveIndex === 1 ? 'isActiveTitle' : ''" @click="smsLogin">短信登录</span>
            </p>
            <el-form v-if="isActive" ref="loginForm" :model="loginForm" label-width="80px">
              <el-form-item label="手机号：">
                <el-input v-model="loginForm2.phone" placeholder="请输入手机号"></el-input>
              </el-form-item>
              <el-form-item label="密码：">
                <el-input v-model="loginForm.pwd" placeholder="请输入密码"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button class="login_btn" @click="accountLogin1('loginForm')">登 录</el-button>
              </el-form-item>
              <p class="login_agree"><el-checkbox>我已阅读并同意<a href="https://nexthuman.cn/agreement/protocol.html"
                    style="color: blue;text-decoration: none;">《用户服务协议》</a>和
                  <a href="https://nexthuman.cn/agreement/privacy.html"
                    style="color: blue;text-decoration: none;">《隐私权政策》</a>
                  &nbsp;&nbsp;<a href="1" style="color: blue;text-decoration: none;">忘记密码？</a>
                </el-checkbox></p><br>
            </el-form>
            <el-form v-else ref="loginForm2" :model="loginForm2" label-width="80px">
              <el-form-item label="手机号：">
                <el-input v-model="loginForm2.phone" placeholder="请输入手机号"></el-input>
              </el-form-item>
              <el-form-item label="验证码：">
                <el-input v-model="loginForm2.verifyCode" style="width:69.8%" placeholder="请输入验证码"></el-input>
                <el-button>获取验证码</el-button>
              </el-form-item>
              <el-form-item>
                <el-button class="login_btn" @click="smsLogin1('loginForm')">登 录</el-button>
              </el-form-item>
              <p class="login_agree"><el-checkbox>我已阅读并同意<a href="https://nexthuman.cn/agreement/protocol.html"
                    style="color: blue;text-decoration: none;">《用户服务协议》</a>和
                  <a href="https://nexthuman.cn/agreement/privacy.html"
                    style="color: blue;text-decoration: none;">《隐私权政策》</a>
                  &nbsp;&nbsp;<a href="1" style="color: blue;text-decoration: none;">忘记密码？</a>
                </el-checkbox></p><br>
            </el-form>
            <el-divider>更多方式</el-divider><br>
            <el-button class="login_btn1" @click="smsLogin1('loginForm')">NH 子账号登录</el-button>
            <el-row>
              <el-col :span="12">
                <el-link type="primary" class="text_left">官网</el-link>
              </el-col>
              <el-col :span="12">
                <v-text>
                  <a><el-link target="_blank" style="color: aliceblue;" class="text_right">没有账号？</el-link></a>
                  <el-link type="primary" class="text_right">注册</el-link>
                </v-text>
              </el-col>
            </el-row>
            <div>
              <p style="font-size: medium;font-family: 华文楷体;">@广州为美搭科技有限公司</p>
            </div>
          </div>
        </div>


      </el-col>
      <el-col :span="8"></el-col>
    </el-row>

  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true, // 用于实现切换登录，作为判断
      isActiveIndex: 0,
      loginForm: {
        account: '',
        pwd: ''
      },
      loginForm2: {
        phone: '',
        verifyCode: ''
      },

      ruleForm: { //初始化
        name: '',
        password: ''
      },
      rules: { //验证
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { min: 11, max: 11, message: '长度为11位', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' }
        ],
      }
    }
  },
  methods: {
    submitForm() {
      this.$router.push("/home");//点击登录直接跳转到首页home
    },
    accountLogin() { // 账号登录
      this.isActive = true
      this.isActiveIndex = 0
    },
    accountLogin1() { // 账号登录
      this.isActive = true
      this.isActiveIndex = 0
      this.$router.push("/home");
    },
    smsLogin() { // 短信登录
      this.isActive = false
      this.isActiveIndex = 1
    },
    smsLogin1() { // 短信登录
      this.isActive = false
      this.isActiveIndex = 1
      this.$router.push("/home");
    }
  }
}
</script>

<style>
.red-bg {
  background-color: slategrey;
}

.context-gird {
  min-height: 80px;
  border-radius: 30px;
}

.el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: relative;
  top: -100%;
  left: 40%;
  transform: translate(-40%, 100%);
}

.el-img {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-30%, 100%);
}

.login_box {
  width: 450px;
  height: 500px;
  background-color: #5149de;
  border-radius: 18px;
  padding: 30px 80px 30px 80px;
}

.login_title {
  text-align: center;
  margin: 30px 30px 40px 30px;
  font-size: 24px;
  color: #666;
}

.login_title span {
  margin: 0 20px 0 20px;
  cursor: pointer;
}

.login_title span:hover {
  color: #6656d1;
  font-weight: bolder;
}

.isActiveTitle {
  color: #2a3a94;
  font-weight: bolder;
}

.login_agree {
  margin-left: 30px;
}

.login_btn {
  width: 80%;
  height: 50px;
  margin: 10 10 10 10px;
  background-color: #6377ba;
  color: #fff;
}

.login_btn1 {
  width: 80%;
  height: 50px;
  margin: 10 10 10 10px;
  background-color: #121e48;
  color: #ffffff;
}

.text_left {
  text-align: left;
  color: blue;
  size: 50px;
  size: 12px;
  font-size: 18px;
}

.text_right {
  text-align: left;
  color: blue;
  size: 50px;
  font-size: 18px;
}</style>
